<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">提成项目驳回重填</span>
    </template>
  </el-page-header>
  
  <div style="width:85%;justify-content:center;display: flex;margin:0 auto;">
    <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 63%;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
    <div class="opinion">
      <div style="width:100%;color: #9d9d9d;margin-bottom:8px;"><el-icon><ChatLineSquare/></el-icon>Tip</div>
      <span style="color:#F56C6C">
      审核意见：</span>{{ Opinion }}
    </div>
  </div>
  <el-table
    :data="EmpKpiList"
    border
    style="width: 80%; margin: 20px auto; border-radius: 8px"
    :header-cell-style="{
      background: '#337ecc !important',
      color: '#ffffff',
      border: 'none !important',
      textAlign: 'center',
    }"
  >
    <el-table-column
      prop="empName"
      label="员工姓名"
      width="100"
    ></el-table-column>
    <el-table-column prop="name" label="提成条目"></el-table-column>
    <el-table-column
      prop="target1"
      label="条目一"
      width="100"
    ></el-table-column>
    <el-table-column prop="inTarget1" label="/￥" width="100"></el-table-column>
    <el-table-column prop="target2" label="条目二" width="100"></el-table-column>
    <el-table-column prop="inTarget2" label="/￥" width="100"></el-table-column>
    <el-table-column prop="result" label="结算/￥" width="100"></el-table-column>
    <el-table-column label="审核结果" width="100">未通过</el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" class="button" @click="submit">提交重审</el-button>
  <Dialog
    v-model="dialogFormVisible"
    :CadreList="CadreList"
    :close="close"
    :update="update"
    :selectContent="selectContent"
    :type="type"
    :title="title"
  ></Dialog>
</template>
<script setup>
import {
  ref,
  onMounted,
  onBeforeMount,
  reactive,
  defineEmits,
  watch,
  getCurrentInstance,
} from "vue";
import { useRoute } from "vue-router";
import { getOneKpiList } from "@/api/empKpi";
import { reAddKpi } from "@/api/wageEmp";
import Dialog from "./components/kpiWageDialog";
import { ElMessage } from "element-plus";
import { deleteOneEmpKpi } from "@/api/empKpi";
import { getOpinion } from "@/api/backWait";

const route = useRoute();
let empId = route.query.empId;
let deptName = route.query.deptName;
let empName = route.query.empName;
let position = route.query.position;
const EmpKpiList = ref([]);
const Opinion = ref([]);
onBeforeMount(() => {
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  getOneKpiList({ empId, positionId }).then((data) => {
    EmpKpiList.value = data.data;
  });
  let type="kpi"
  getOpinion({ empId, positionId,type }).then((data) => {
    Opinion.value = data.data.opinion;
  });
});
watch(
  EmpKpiList,
  (newVal) => {
    console.log("list发生了改变");
  },
  { deep: true }
);

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const title = ref("新增计件单");
const type = ref("add");
const selectContent = ref();
const dialogFormVisible = ref(false);
const handleAdd = () => {
  selectContent.value = {
    id: "",
    empId: "",
    positionId: "",
    pieceId: "",
  };
  title.value = "新增计件单";
  type.value = "add";
  dialogFormVisible.value = true;
};
const handleEdit = (index, row) => {
  console.log(row);
  selectContent.value = row;
  title.value = "编辑计件单";
  type.value = "edit";
  dialogFormVisible.value = true;
};
const handleDelete = (index, row) => {
  deleteOneEmpKpi({ id: row.empKpiId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      update();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

const submit = () => {
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  let positionType = route.query.type;
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  reAddKpi({ positionId, empId, assessorId, positionType }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "提交成功",
        type: "success",
      });
      goback();
    } else {
      ElMessage.error("提交失败");
    }
  });
};

const close = () => {
  dialogFormVisible.value = false;
};
const update = () => {
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  getOneKpiList({ empId, positionId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      EmpKpiList.value = data.data;
    } else {
      ElMessage.error("更新失败");
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.my-label) {
  background: rgba(51, 126, 204, 0.2) !important;
  color: rgb(51, 126, 204) !important;
  border: #337ecc 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(51, 126, 204, 0.9) !important;
  border: #337ecc 2px solid !important ;
}
.pagination {
  margin: 20px 50px;
  display: flex;
  justify-content: end;
}
.button {
  width: 120px;
  height: 40px;
  margin: 20px 130px;
  float: right;
}
.opinion {
  width: 25%;
  height: 100%;
  border-radius: 8px;
  color: #363636;
  display: inline-block;
  border: #363636 2px dashed;
  background: #fff;
  margin: 10px auto;
  padding: 10px;
}
</style>